* {
  margin: 0;
  padding: 0;
}

.container {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../images/main.png) no-repeat center;
  background-size: auto 100%;
  background-color: rgb(81, 188, 230);
}

.img-two-people {
  width: 100%;
  position: absolute;
  bottom: 0;
}

.p-remain {
  width: 100%;
  position: absolute;
  top: 18%;
  text-align: center;
  color: #ff0;
  font-size: 1.4rem;
}

.img-btn-get, .img-btn-route {
  position: absolute;
  bottom: 2%;
  height: 6%;
}

.img-btn-get {
  left: 12%;
}

.img-btn-route {
  right: 12%;
}

.img-main-live {
  display: block;
  height: 66%;
  position: absolute;
  left: 50.3%;
  top: 65.5%;
  transform: translate(-50%, -50%);
}

.img-main-bottom {
  width: 100%;
  position: absolute;
  bottom: 0;
}

.box-grey {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgb(93, 93, 93);
}

.pop-1, .pop-2, .pop-3, .pop-4 {
  display: none;
  width: 70%;
  padding: 5% 5% 0 5%;
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%, 0%);
  text-align: center;
  background-color: rgb(93, 93, 93);
}

.pop-btn {
  display: block;
  position: absolute;
  width: 80%;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, 0%);
}

.img-cancel {
  width: 30px;
  position: absolute;
  right: 0;
}

.img-cancel-share {
  width: 30px;
  position: absolute;
  top: 5%;
  left: 13%;
}

.pop-share {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  text-align: center;
  background-color: rgb(93, 93, 93);
}
.pop-share-app {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  text-align: center;
  background-color: rgb(93, 93, 93);
}
